<template>
  <div class="search_box">
    <!-- <div class="bg"> -->

      <div class="search_box_list">
        <!-- <el-button  size="mini" @click="back()" icon="el-icon-arrow-left">返回上一页</el-button>&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp; -->
        <!-- <br> -->
        <!-- <br> -->
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="具体信息">
            <el-input v-model="formInline.user" placeholder="请输入具体信息"></el-input>
          </el-form-item>
          <el-form-item label="评论类别">
            <el-select v-model="formInline.region1" placeholder="请选择">
              <el-option label="全部" value="全部"></el-option>
              <el-option label="好评" value="好评"></el-option>
              <el-option label="差评" value="差评"></el-option>
            </el-select>
          </el-form-item>
          <!-- <el-form-item label="活动区域2">
            <el-select v-model="formInline.region2" placeholder="活动区域">
              <el-option label="区域一" value="shanghai"></el-option>
              <el-option label="区域二" value="beijing"></el-option>
            </el-select>
          </el-form-item> -->
          <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
          </el-form-item>
        </el-form>
        <div class="table_box">
          <el-table :data="tableData" style="width: 100%" max-height="650">
            <el-table-column fixed prop="date" label="日期" width="150"></el-table-column>
            <el-table-column prop="name" label="用户名" width="120"></el-table-column>
            <el-table-column prop="province" label="IP地址" width="120"></el-table-column>
            <!-- <el-table-column prop="city" label="市区" width="120"></el-table-column> -->
            <el-table-column prop="address" label="评论信息" width="300"></el-table-column>
            <!-- <el-table-column prop="zip" label="邮编" width="120"></el-table-column> -->
            <el-table-column fixed="right" label="操作" width="120">
              <template slot-scope="scope">
                <el-button
                  @click.native.prevent="deleteRow(scope.$index, tableData)"
                  type="text"
                  size="small"
                >查询信息</el-button>
              </template>
            </el-table-column>
          </el-table>
          <div class="block">
            <span class="demonstration">完整功能</span>
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage4"
              :page-sizes="[100, 200, 300, 400]"
              :page-size="100"
              layout="total, sizes, prev, pager, next, jumper"
              :total="400"
            ></el-pagination>
          </div>
        </div>
      </div>
    <!-- </div> -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      formInline: {
        user: "",
        region1: "",
        region2: ""
      },
      tableData: [
        {
          date: "2016-05-03",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "风景不错",
          zip: 200333
        },
        {
          date: "2016-05-02",
          name: "王小虎",
          province: "北京",
          city: "普陀区",
          address: "风景不错",
          zip: 200333
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          province: "广西",
          city: "普陀区",
          address: "风景不错",
          zip: 200333
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          province: "广东",
          city: "普陀区",
          address: "风景不错",
          zip: 200333
        },
        {
          date: "2016-05-08",
          name: "王小虎",
          province: "安徽",
          city: "普陀区",
          address: "风景不错",
          zip: 200333
        },
        {
          date: "2016-05-06",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "风景不错",
          zip: 200333
        },
        {
          date: "2016-05-07",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "风景不错",
          zip: 200333
        }
      ],
      currentPage4: 4
    };
  },
  methods: {
    onSubmit() {
      console.log("submit!");
    },
    deleteRow(index, rows) {
      // rows.splice(index, 1);
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    back() {
      this.$router.go(-1)
      // console.log(`当前页: ${val}`);
    }
  }
};
</script>

<style lang="scss" scoped>
// @import "../assets/scss/search.scss";
.search_box {
  width: 100%;
  height: 95%;
  margin: 0 auto;
  background-color: rgb(255, 255, 255,0.8);
  margin-top: 10px;
  padding: 20px;
    border-radius: 10px;
  overflow: hidden;
}
</style>